<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022-01-31
  Time: 18:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
</head>

<body>
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="nameVo" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <select id="pidOptions" lay-filter="pid"  name="pidVo">

                </select>
            </div>
            <div class="layui-input-inline">
                <select id="sidOptions" lay-filter="sid" name="sidVo">
                </select>
            </div>
            <div class="layui-input-inline">
                <select  id="xidOptions"  name="xidVo">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" class="layui-btn" lay-submit lay-filter="searchForm" value="搜索" />
            </div>
        </div>
    </div>
</div>



<table id="tableId" lay-filter="t"></table>
<script type="text/html" id="bts">
    <a class="layui-btn layui-btn-mini layui-btn-danger" id="upUers" lay-event="edit">编辑</a>
  <%--  {{#  if(d.EnclosureUrl != ''){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="download">下载简历</a>
    {{#  } }}--%>
</script>


</body>
<%--修改--%>
<script type="text/html" id="upForm">

    <form class="layui-form" id="upf">
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <select id="pidOptionss" lay-filter="pids"  name="pid">

                </select>
            </div>
            <div class="layui-input-inline">
                <select id="sidOptionss" lay-filter="sids" name="sid">
                </select>
            </div>
            <div class="layui-input-inline">
                <select  id="xidOptionss"  name="xid">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like" value="xz" title="写作">
                <input type="checkbox" name="like2" value="yd" title="阅读">
                <input type="checkbox" name="like3" value="fd" title="发呆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" id="nan" value="1" title="男">
                <input type="radio" name="sex" id="nv" value="2" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" class="layui-btn" lay-submit lay-filter="upFo" value="修改" />
                <input type="reset" class="layui-btn layui-btn-primary" value="重置"/>

            </div>
        </div>
    </form>
</script>
<script type="text/javascript">

    layui.use(function (){
        var userTable = layui.table;
        //加载form插件
        var userForm=layui.form;
        // 加载日期插件
        var laydate=layui.laydate;
        //组件弹框
        var layer=layui.layer;

        var tables=layui.table;

        $("#upUers").on('click',function (){


        });
        var id;
       tables.on('tool(t)',function(obj){
            id=obj.data.id;
            console.log(obj);
            if (obj.event==='edit'){


                layer.open({
                    type:1,
                    title:"修改密码",
                    area:"1000px",
                    content:$("#upForm").html()
                });

                //初始化下拉框选项 [{},{}]
                initSelects("pidOptionss",0);
                userForm.render();
                // 遍历select
                $("#pidOptionss").each(function() {
                    // this代表的是<option></option>，对option再进行遍历
                    $(this).children("option").each(function() {
                        // 判断需要对那个选项进行回显
                        if (this.value == obj.data.pid) {
                            console.log($(this).text());
                            // 进行回显
                            $(this).attr("selected","selected");
                            //查询市的数据
                            initSelects("sidOptionss",obj.data.pid);
                            //把县的下拉框内容清空
                            $("#xidOptionss").html("");
                            userForm.render("select");
                            //回显市
                            $("#sidOptionss").each(function() {
                                // this代表的是<option></option>，对option再进行遍历
                                $(this).children("option").each(function() {
                                    // 判断需要对那个选项进行回显
                                    if (this.value == obj.data.sid) {
                                        console.log($(this).text());
                                        // 进行回显
                                        $(this).attr("selected","selected");
                                        //县的下拉框
                                        initSelects("xidOptionss",obj.data.sid);
                                        userForm.render("select");
                                        huixian("xidOptionss",obj.data.xid);
                                    }
                                });
                            })
                        }
                    });
                });
                    var hy=obj.data.hobbys.split(",");
                var l1= $(":input[name=like]").val();
                var l2= $(":input[name=like2]").val();
                var l3= $(":input[name=like3]").val();
                console.log(l1)
                for (let i = 0; i < hy.length; i++) {
                    if(hy[i]==l1){
                        $(":input[name=like]").prop('checked',true);
                    }
                    if(hy[i]==l2){
                        $(":input[name=like2]").prop('checked',true);
                    }
                    if(hy[i]==l3){
                        $(":input[name=like3]").prop('checked',true);
                    }
                    userForm.render();//别忘了刷新

                }

                if (obj.data.sex==1){
                    $("#nan").prop("checked",true);
                }else {
                    $("#nv").prop("checked",true);
                }
                userForm.render();//别忘了刷新
                //监听下拉框事件
                userForm.on("select(pids)",function (res) {
                    initSelect("sidOptionss",res.value);
                    //把县的下拉框内容清空
                    $("#xidOptions").html("");
                    userForm.render("select");
                });
                userForm.on("select(sids)",function (res) {
                    initSelect("xidOptionss",res.value);
                    userForm.render("select");
                });
                console.log(obj)
            }
        });
        // 监听注册表单的提交事件
        userForm.on("submit(upFo)",function (re) {
            console.log(re);
            // 验证
            var hobbys="";
            if (re.field.like!=undefined){
                hobbys+=re.field.like+",";
            }if (re.field.like2!=undefined){
                hobbys+=re.field.like2+",";
            }if (re.field.like3!=undefined){
                hobbys+=re.field.like3+",";
            }
            if (hobbys.length>0){
                hobbys=hobbys.substr(0,hobbys.length-1);
            }

            re.field.hobbys=hobbys;
            re.field.id=id;
            console.log(re.field);
            $.post({
                url:"/user/upUser.do",
                data:re.field,
                async:true,
                success:function (c){
                    if (c.code==200){
                        layer.msg("修改成功");
                        layer.closeAll();
                        dataTable.reload();
                    }
                    else {
                        console.log("处理异常"+c.msg);
                    }
                }
            });


        });

        function huixian(name,obj){
           // 县的回显
           $("#"+name).each(function() {
               // this代表的是<option></option>，对option再进行遍历
               $(this).children("option").each(function() {
                   // 判断需要对那个选项进行回显
                   if (this.value == obj) {
                       console.log($(this).text());
                       // 进行回显
                       $(this).attr("selected","selected");
                   }
               });
           })

       }

        //分页
        var dataTable= userTable.render({
            id:"userTb",
            elem: '#tableId'
            ,url: '/user/queryUser.do' //数据接口
            ,page:true   //开启分页
            ,parseData:function (res) { // res是后台返回的值
                console.log(res.data.count);
                return res.data;  // 这个json表格的数据
            }// 当后台返回的数据                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             和table要求的不一致的时候  需要此属性来转换
            ,limit:2
            ,limits:[2,3,5]
            ,cols: [[ //表头
                {field:"name",title:"账号"},
                {field:"sex",title:"性别",templet:function (dd){
                    return dd.sex==1?"男":"女";
                    }},
                {field:"birthday",title:"生日"},
                {field:"sheng",title:"籍贯",templet:function (dd) {
                    if (dd.xname==null){
                        return dd.pname+"："+dd.sname;
                    }else {
                        return dd.pname+"："+dd.sname+":"+dd.xname;
                    }

                    }},
                {field:"createDate",title:"注册时间"},
                {title:"操作",toolbar:"#bts"}

            ]]
        });
        //监听下拉框事件
        userForm.on("select(pid)",function (res) {
            initSelect("sidOptions",res.value);
            //把县的下拉框内容清空
            $("#xidOptions").html("");
            userForm.render("select");
        });
        userForm.on("select(sid)",function (res) {
            initSelect("xidOptions",res.value);
            userForm.render("select");
        });
        //初始化下拉框选项 [{},{}]
        initSelect("pidOptions",0);
        userForm.render();

        // 初始化下拉框 那个下拉框   数据的来源
        function initSelect(elem,pid) {
            var datas;// 下拉框数据

            $.post({
                url:"/user/area.do",
                data:{"pid":pid},
                async:false,
                success:function (res) {
                    if(res.code===200){
                        datas=res.data;
                    }else{
                        console.log("服务端处理异常了");
                    }
                }
            });
            var htmls="<option value=\"-1\">请选择</option>";
            //遍历数据 拼接模板
            for (var i = 0; i <datas.length ; i++) {
                //得到其中的一条数据
                var d=datas[i];
                htmls+="<option value='"+d.id+"'>"+d.name+"</option>";
            }
            $("#"+elem).html(htmls);
        }
        // 初始化下拉框 那个下拉框   数据的来源
        function initSelects(elem,pid) {
            var datas;// 下拉框数据

            $.post({
                url:"/user/area.do",
                data:{"pid":pid},
                async:false,
                success:function (res) {
                    if(res.code===200){
                        datas=res.data;
                    }else{
                        console.log("服务端处理异常了");
                    }
                }
            });
            var htmls;
            //遍历数据 拼接模板
            for (var i = 0; i <datas.length ; i++) {
                //得到其中的一条数据
                var d=datas[i];
                htmls+="<option value='"+d.id+"'>"+d.name+"</option>";
            }
            $("#"+elem).html(htmls);
        }


        // 监听注册表单的提交事件
        userForm.on("submit(searchForm)",function (res) {
            // 重新加载表格
            res.field.page=1;
            userTable.reload("userTb",{where:res.field})
        })

    })
</script>

</html>
